<template>
	<view class="work-container padding-bottom-xs">
		<!-- 轮播图 -->
		<!-- 购买须知 -->
		<view>
			<uni-notice-bar
				text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
		</view>
		<view class="margin-sm">
			<view v-for="item in list">
				<view style="width: 100%;" class="maoboli padding-sm margin-top radius ">
					<view class="flex justify-center">
						<view style="display: flex;width: 100%;" @click="shareOrder(item.id)">
							<view style="width: 120rpx;">

								<image :src="item.sysOrgModel.images.split(',')"
									style="width: 120rpx;height: 120rpx;border-radius: 8px;">
								</image>

								<view class="juzhong text-red text-sm ">
									{{item.price}}元
								</view>

							</view>
							<view class="margin-left-sm" style="width: 100%;">

								<view class="justify-between flex">
									<view style="">
										<view class="text-lg text-bold">
											{{item.sysShopDeviceModel.title}}
										</view>
										<view class="text-df text-gray margin-top-xs">
											<text class=" ">{{item.sysOrgModel.orgName}}</text>
										</view>
										<view class="text-sm text-gray">
											<text class=" ">{{item.sysOrgModel.address}}</text>
										</view>
									</view>
									<view class="text-sm text-gray " style="width: 100rpx;">
										<view class="flex justify-end">
											{{item.status==0?'未支付':item.status==1?'预约成功':item.status==2?'已完成':item.status==3?'已取消':item.status==4?'消费中':'未知状态'}}

										</view>
										<view class="flex justify-end">
											{{item.priceStatus==0?'未支付':item.priceStatus==1?'已支付':item.priceStatus==2?'已退款':'未知状态'}}
										</view>
									</view>

								</view>

								<view>
									<text
										class="line-pink ">{{item.startTime+" 到  "+item.endTime.split(' ')[1]+"  "+item.hourNumber+"小时"}}</text>
								</view>


							</view>
						</view>

					</view>
					<view class="justify-end flex margin-top-xs">
						<!-- 未支付 -->
						<view v-if="item.status==0">
							<view class="justify-end flex">
								<!-- <button class="cu-btn round line-red shadow orderbutton">删除</button> -->
								<button class="cu-btn round line-red shadow orderbutton"
									@click="shareOrder(item.id)">分享</button>
								<button class="round  bg-pink  cu-btn shadow orderbutton "
									@click="reservation2(item)">支付</button>
							</view>
							<view class="text-gray">房间将在5分钟后释放,请尽快支付</view>
						</view>
						<!-- 预约成功 -->
						<view v-if="item.status==1">
							<button class="cu-btn round line-red shadow orderbutton">取消/退款</button>
							<button class="cu-btn round line-red shadow orderbutton"
								@click="shareOrder(item.id)">分享</button>
							<button class="round  bg-pink  cu-btn orderbutton shadow" @click="open(item)"
								style="width: 200rpx;">开门</button>
						</view>
						<!-- 已完成 -->
						<view v-if="item.status==2">
							<button class="cu-btn round line-red shadow orderbutton"
								@click="shareOrder(item.id)">分享</button>
						</view>
						<!-- 取消成功 -->
						<view v-if="item.status==3">
							<button class="round  bg-pink  cu-btn orderbutton shadow">重新预约</button>
						</view>
						<!-- 消费中 -->
						<view v-if="item.status==4">

							<button class="cu-btn round line-red shadow orderbutton"
								@click="shareOrder(item.id)">分享</button>
							<button class="round  bg-pink  cu-btn orderbutton shadow" @click="open(item)"
								style="width: 200rpx;">开门</button>
						</view>

					</view>

				</view>
			</view>

			<view v-if="list.length==0" class="margin-top juzhong" style="height: 750rpx;">
				<text style="color: #999;">还没有任何订单</text>
			</view>

			<guaguaLxianxi style="margin-bottom: 200rpx;"></guaguaLxianxi>
		</view>

		<openDoor ref="openDoor"></openDoor>

		<!-- <Tabbar :pageIndex="2"></Tabbar> -->
	</view>
</template>

<script>
	import {
		getList,
		reservation
	} from "@/api/shop/userorder/SysUserOrderManagementApi.js"
	import storage from '@/utils/storage'
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				list: [],
				queryForm: {
					pageNo: 1,
					pageSize: 10,
				},
			}
		},
		onShow() {
			this.init()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh()
		},
		methods: {

			//确认预约 第二步
			async reservation2(item) {
				let {
					data,
					msg,
					code
				} = await reservation(item)
				if (code == 0) {
					this.init()
				} else {
					uni.showToast({
						title: msg,
						icon: "none"
					})
				}
			},
			clickBannerItem(item) {

			},
			changeSwiper(e) {
				this.current = e.detail.current
			},

			init() {

				this.getList();
			},

			/**
			 * 分享订单
			 */
			shareOrder(id) {
				uni.navigateTo({
					url: '/pages/order/Info/Info?id=' + id
				})
				uni.showToast({
					title: '分享订单',
					icon: 'none'
				})
			},

			async getList() {

				let {
					data
				} = await getList(this.queryForm)
				this.list = data.rows
			},
			/**
			 * 打开设备
			 * @param {Object} data
			 */
			open(data) {

				//在此要判断下开大门还是开小门。
				this.$refs.openDoor.open(data)
			},
			/**
			 * 跳转到商品详情
			 * @param {Object} id
			 * @param {Object
			 */

			onClick(id) {
				uni.navigateTo({
					url: "/pages/goods/goodsInfo/goodsInfo?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background: linear-gradient(to bottom, $uni-color-primary, $uni-bg-color-grey 40%); // background-size: 100% 400px;
		height: 100%;
	}

	.orderbutton {
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.mendianTap {
		margin-top: 5rpx;
		padding: 1px 4px;
		border: solid #999 1px;
		margin-right: 10rpx;
		margin-top: 5rpx;
		border-radius: 5px;
	}

	.background {

		color: #fff;
	}
</style>